<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
    <title>忘记密码</title>
    <link rel="stylesheet" href="../css/base.css">
    <link rel="stylesheet" href="../css/forgerPassword.css">
    <!-- 
        外部阿里巴巴矢量图标 
        <link rel="stylesheet" href="http://at.alicdn.com/t/font_2175095_cueku40yyub.css">
    -->
    <!-- 引入外部jQuery CDN文件 -->
    <script src="../js/jquery-3.5.1.min.js"></script>
</head>
<body>
    <div class="forger-pwd-box">
        <h3>忘记密码</h3>
        <div class="forget-area">
            <div class="forget-item">
                <label for="iphone" class="iconfont icon19"></label>
                <input id="iphone" type="tel" placeholder="请输入账号绑定的手机号" autocomplete="off">
            </div>
            <div class="forget-code">
                <div class="qr-code iconfont iconyanzhengma"></div>
                <input type="text" placeholder="请输入验证码" autocomplete="off">
                <button id="qr-code-btn">获取验证码</button>
            </div>
            <div class="user-action">
                <a href="./login.html">登录账号</a>
                <a href="./register.html">注册账号</a>
            </div>
        </div>
    </div>
    <!-- 脚本代码 -->
    <script>
        /*
            1、手机号正则
                if(!(/^1[3456789]\d{9}$/.test(手机号...))){
                    不符合规范时执行的语法
                }
            2、定时器类型+清除定时器+时间标识符
            3、文本操作text()、属性操作attr()与removeAttr()、样式操作css()
        */
        $(function(){
            $('#qr-code-btn').on('click',function(){
                var iphoneValue = $('#iphone').val();
                if(iphoneValue.replace(/\s+/g,"").length === 0){
                    alert('手机号不能为空')
                }else if(!(/^1[3456789]\d{9}$/.test(iphoneValue))){
                    alert('手机号格式错误')
                }else{
                    alert('手机号正确，发送验证码')
                    var number = 10,timer=null;
                    timer = setInterval(() => {
                        if(number>=0){
                            $(this).text(number+'s');
                            number--;
                            $(this).attr('disabled','disabled')
                            $(this).css('cursor','not-allowed')
                        }else{
                            $(this).text('获取验证码');
                            $(this).removeAttr('disabled')
                            $(this).css('cursor','pointer')
                        }
                    }, 1000);
                }
            })
        })
    </script>
</body>
</html>